<script setup>
import { ref, onMounted } from 'vue';
import { useUserStore } from '@/stores/userStore';

const userStore = useUserStore();
const form = ref({});
const isEditing = ref(false);
const successMessage = ref('');
const isLoading = ref(false); 

onMounted(async () => {
  try {
    isLoading.value = true;
    if (userStore.user?.userid) {
      // 执行获取用户信息的异步操作
      await userStore.fetchUserInfo(userStore.user.userid);
      console.log('从 store 获取的用户信息:', userStore.user); // 检查从 store 获取的用户信息
      // 更新表单数据
      form.value = { ...userStore.user };
      console.log('更新后的表单数据:', form.value); // 输出更新后的表单数据
    }
  } catch (error) {
    console.error("获取用户信息失败:", error);
    // 可以在这里添加提示信息，告知用户获取信息失败
  } finally {
    isLoading.value = false;
  }
});

const handleEdit = () => {
  isEditing.value = true;
};

const handleUpdate = async () => {
  try {
    await userStore.updateUserInfo(userStore.user.userid, form.value);
    successMessage.value = '信息更新成功';
    isEditing.value = false;
  } catch (error) {
    successMessage.value = '更新失败';
  }
};

const handleCancel = () => {
  form.value = { ...userStore.user };
  isEditing.value = false;
};
</script>

<template>
  <div class="login-container">
    <div class="login-form">
      <h2>我的账户</h2>
      
      <div v-if="!isEditing" class="user-details">
        <div class="form-group">
          <label>用户名:</label>
          <p class="info-display">{{ userStore.user?.userid }}</p>
        </div>
        <div class="form-group">
          <label>邮箱:</label>
          <p class="info-display">{{ userStore.user?.email }}</p>
        </div>
        <div class="form-group">
          <label>姓名:</label>
          <p class="info-display">{{ userStore.user?.firstname }} {{ userStore.user?.lastname }}</p>
        </div>
        <div class="form-group">
          <label>地址:</label>
          <p class="info-display">{{ userStore.user?.addr1 }}, {{ userStore.user?.addr2 }}</p>
        </div>
        <div class="form-group">
          <label>城市:</label>
          <p class="info-display">{{ userStore.user?.city }}, {{ userStore.user?.state }}</p>
        </div>
        <div class="form-group">
          <label>邮编:</label>
          <p class="info-display">{{ userStore.user?.zip }}</p>
        </div>
        <div class="form-group">
          <label>国家:</label>
          <p class="info-display">{{ userStore.user?.country }}</p>
        </div>
        <div class="form-group">
          <label>电话:</label>
          <p class="info-display">{{ userStore.user?.phone }}</p>
        </div>
        <button @click="handleEdit" class="submit-btn">编辑信息</button>
      </div>

      <form v-else @submit.prevent="handleUpdate" class="edit-form">
        <div class="form-group">
          <label>用户名:</label>
          <input v-model="form.userid" class="form-input" readonly />
        </div>
        <div class="form-group">
          <label>邮箱:</label>
          <input v-model="form.email" type="email" class="form-input" />
        </div>
        <div class="form-group">
          <label>姓氏:</label>
          <input v-model="form.firstname" class="form-input" />
        </div>
        <div class="form-group">
          <label>名字:</label>
          <input v-model="form.lastname" class="form-input" />
        </div>
        <div class="form-group">
          <label>地址1:</label>
          <input v-model="form.addr1" class="form-input" />
        </div>
        <div class="form-group">
          <label>地址2:</label>
          <input v-model="form.addr2" class="form-input" />
        </div>
        <div class="form-group">
          <label>城市:</label>
          <input v-model="form.city" class="form-input" />
        </div>
        <div class="form-group">
          <label>省份:</label>
          <input v-model="form.state" class="form-input" />
        </div>
        <div class="form-group">
          <label>邮编:</label>
          <input v-model="form.zip" class="form-input" />
        </div>
        <div class="form-group">
          <label>国家:</label>
          <input v-model="form.country" class="form-input" />
        </div>
        <div class="form-group">
          <label>电话:</label>
          <input v-model="form.phone" class="form-input" />
        </div>
        <div class="button-group">
          <button type="submit" class="submit-btn">保存</button>
          <button type="button" @click="handleCancel" class="cancel-btn">取消</button>
        </div>
      </form>

      <p v-if="successMessage" class="success-message">{{ successMessage }}</p>
    </div>
  </div>
</template>

<style scoped>
.form-input {
  width: 100%;
  padding: 12px 15px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  background-color: #f8f9fa;
}

.login-form {
  width: 400px;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.login-form h2 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 30px;
}

.user-details {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.form-group p {
  padding: 12px 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #2980b9;
}

.button-group {
  display: flex;
  gap: 10px;
}

.cancel-btn {
  width: 100%;
  padding: 12px;
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cancel-btn:hover {
  background-color: #c0392b;
}
</style>